<template>
	<view class="tab">
		<scroll-view :scroll-x="true" class="scroll">
			<view class="bar">
				<view v-for="(title,index) in titleList" :key="title"
					:class="{bar_item: titleList.length <= 5,bar_multi_item : titleList.length > 5}">
					<view class="txt select" v-if="current == index" @click="change(index)">
						{{title}}
						<view class="underline"></view>
					</view>
					<view v-else @click="change(index)" class="txt">{{title}}</view>
				</view>
			</view>
		</scroll-view>
		<swiper class="swiper" :current="current" @change="changeSwiper">
			<swiper-item v-for="(item,i) in titleList">
				<!-- <slot :name="i"></slot> -->
				<!-- #ifdef H5 || APP-PLUS  -->
				<slot :name="i"></slot>
				<!-- #endif -->
				
				<!-- #ifdef MP -->
				<slot name="{{i}}"></slot>
				<!-- #endif -->
			</swiper-item>
		</swiper>
	</view>
	</view>
</template>

<script>
	export default {
		name: "tab-bar",
		data() {
			return {
				current: 0
			}
		},
		props: {
			titleList: Array
		},
		created() {

		},
		methods: {
			change(i) {
				this.$emit("change", i)
				setTimeout(() => {
					this.current = i
				}, 500)
			},
			changeSwiper(e) {
				this.$emit("change", e.detail.current)
				setTimeout(() => {
					this.current = e.detail.current
				}, 200)
			}
		}
	}
</script>

<style scoped>
	.tab {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
	}

	.scroll {
		height: 34px;
		white-space: nowrap;
		width: 100%;
	}

	.bar {
		flex-shrink: 0;
		display: flex;
		height: 33px;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		border-bottom: #f0f0f0 solid 1px;
	}


	.bar_item {
		flex: 1;
		height: 32px;
		text-align: center;
		/* font-size: 15px; */
		line-height: 32px;
	}

	.bar_multi_item {
		margin: 0 10px;
		padding: 0 10px;
		height: 32px;
		text-align: center;
		/* font-size: 15px; */
		line-height: 32px;
	}

	.txt {
		color: #555555;
	}


	.select {
		font-weight: 550;
		/* padding-bottom: 7px; */
		color: #ED716B;
		/* border-bottom: #ED716B solid 3px; */
		position: relative;
	}


	.underline {
		height: 2px;
		width: 40%;
		border-radius: 25% 25%;
		background-color: #ED716B;
		left: 30%;
		bottom: -1;
		position: absolute;
		/* transform: scaleX(1); */
	}

	.content {
		flex: 1;
	}

	.swiper {
		height: 100%;
	}
</style>
